<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="题目类型" prop="quType">
        <el-select v-model="dataForm.quType" filterable placeholder="请选择题目类型">
          <el-option
            v-for="item in quType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度等级" prop="level">
        <el-select v-model="dataForm.level" filterable placeholder="请选择难度等级">
          <el-option
            v-for="item in level"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属题库" prop="questionBankId">
        <el-select v-model="dataForm.questionBankId" multiple filterable placeholder="选择或搜索归属题库">
          <el-option
            v-for="item in questionBank"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目内容" prop="content">
        <el-input v-model="dataForm.content" placeholder="题目内容" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="整题解析" prop="analysis">
        <el-input v-model="dataForm.analysis" placeholder="整题解析"></el-input>
      </el-form-item>
      <div v-if="dataForm.quType" class="filter-container" style="margin-top: 25px">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click="handleAdd"
          v-if="dataForm.quType !== 3"
        >添加</el-button>
        <el-table :data="dataForm.answerList" :border="true" style="width: 100%;">
          <el-table-column label="答案" width="120" align="center">
            <template slot-scope="scope">
              <el-radio
                v-model="radioIndex"
                :label="scope.$index"
                v-if="dataForm.quType === 1 || dataForm.quType === 3"
              >&nbsp;</el-radio>

              <el-checkbox
                v-model="scope.row.isRight"
                :true-label="1"
                :false-label="0"
                v-if="dataForm.quType === 2"
              >&nbsp;</el-checkbox>
            </template>
          </el-table-column>

          <!-- <el-table-column
            v-if="itemImage"
            label="选项图片"
            width="120px"
            align="center"
          >
            <template slot-scope="scope">

              <file-upload
                v-model="scope.row.image"
              />

            </template>
          </el-table-column>-->

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" v-if="dataForm.quType !== 3" />
              <el-input v-model="scope.row.content" type="textarea" v-else disabled />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.analysis" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeItem(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    // , {
    //         value: 4,
    //         label: '简答题'
    //       }
    return {
      quType: [{
        value: 1,
        label: '单选题'
      }, {
        value: 2,
        label: '多选题'
      }, {
        value: 3,
        label: '判断题'
      }],
      level: [{
        value: 1,
        label: '简单'
      }, {
        value: 2,
        label: '普通'
      }, {
        value: 3,
        label: '较难'
      }, {
        value: 4,
        label: '困难'
      }],
      visible: false,
      dataForm: {
        id: 0,
        quType: null,
        level: '',
        image: '',
        content: '',
        createTime: '',
        updateTime: '',
        remark: '',
        analysis: '',
        questionBankId: [],
        answerList: []
      },
      radioAnswerList: [],
      checkBoxAnswerList: [],
      judgeAnswerList: [],
      radioIndex: null,
      test: null,
      questionBank: [],
      dataRule: {
        questionBankId: [
          { required: true, message: '归属题库不能为空', trigger: ['blur', 'change'] }
        ],
        quType: [
          { required: true, message: '题目类型不能为空', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '题目难度不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '题目内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    radioIndex (newVal, oldVal) {
      this.dataForm.answerList.forEach((answer, index) => {
        if (index === newVal) {
          answer.isRight = 1
        } else {
          answer.isRight = 0
        }
      })
    },
    answerList (newval, oldVal) {
      if (this.dataForm.quType === 1) {
        this.radioAnswerList = newval
      }
      if (this.dataForm.quType === 2) {
        this.checkBoxAnswerList = newval
      }
      if (this.dataForm.quType === 3) {
        this.judgeAnswerList = newval
      }
    },
    relQuType (newval, oldVal) {
      if (newval === 1) {
        this.dataForm.answerList = this.radioAnswerList
      }
      if (newval === 2) {
        this.dataForm.answerList = this.checkBoxAnswerList
      }
      if (newval === 3) {
        this.dataForm.answerList = this.judgeAnswerList
        if (this.dataForm.answerList.length === 0) {
          this.dataForm.answerList.push({ isRight: 0, content: '对', analysis: '' })
          this.dataForm.answerList.push({ isRight: 0, content: '错', analysis: '' })
        }
      }
    }
  },
  computed: {
    answerList () {
      return this.dataForm.answerList
    },
    relQuType () {
      return this.dataForm.quType
    }
  },
  methods: {
    removeItem (index) {
      this.dataForm.answerList.splice(index, 1)
    },

    // 添加子项
    handleAdd () {
      this.dataForm.answerList.push({ isRight: 0, content: '', analysis: '' })
    },
    getQuestionBank () {
      this.$http({
        url: this.$http.adornUrl(`/workmanagement/questionbank/getInfo`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.questionBank = data.questionBanks
        }
      })
    },
    init (id) {
      this.radioAnswerList = []
      this.checkBoxAnswerList = []
      this.judgeAnswerList = []
      this.getQuestionBank()
      this.radioIndex = null
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/workmanagement/question/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.quType = data.question.quType
              this.dataForm.level = data.question.level
              this.dataForm.content = data.question.content
              this.dataForm.createTime = data.question.createTime
              this.dataForm.remark = data.question.remark
              this.dataForm.analysis = data.question.analysis
              this.dataForm.questionBankId = data.question.questionBankId
              this.dataForm.answerList = data.question.answerList
              if (data.question.quType === this.quType[0].value || data.question.quType === this.quType[2].value) {
                this.radioIndex = data.question.answerIndex[0]
              }
            }
          })
        } else {
          this.dataForm.answerList = []
          this.dataForm.radioIndex = null
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/workmanagement/question/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'quType': this.dataForm.quType,
              'level': this.dataForm.level,
              'content': this.dataForm.content,
              'analysis': this.dataForm.analysis,
              'answers': this.dataForm.answerList,
              'questionBankIds': this.dataForm.questionBankId
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
